<template>
	<div class="edit-comp-root">
		<div class="row-line-head row-reverse" style="height: 42px">
			<el-button @click="onEditClick" :type="!isEditState ? 'primary' : ''" :disabled="isEditState">
				{{ $t("message.public.edit") }}
			</el-button>
		</div>
		<div class="divider" />

		<!-- <el-form label-position="left" label-width="205px" :model="formLabelAlign" :rules="rules" ref="formLabelAlign"> -->
		<el-form label-position="left" label-width="205px" :model="formLabelAlign" ref="formLabelAlign">
			<el-form-item :label="$t('message.userPageTable.userId')" prop="acc">
				<el-input :disabled="true" v-model="formLabelAlign.acc" size="small"></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.uname')" prop="checkName" style="height=10px">
				<el-input class="orange" v-model="formLabelAlign.name" :disabled="!isEditState || !canEditCommonInfo"
					size="small" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.paw')" prop="pass">
				<el-input class="orange" v-model="formLabelAlign.pwd" :disabled="!isEditState || !canEditCommonInfo"
					size="small" type="password" autocomplete="off" v-if="pwdFlg == 1"
					@focus="formLabelAlign.pwd = ''"></el-input>
				<el-input class="orange" v-model="formLabelAlign.pwd" :disabled="!isEditState || !canEditCommonInfo"
					size="small" type="password" autocomplete="off" show-password v-else></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.confirmPsd')" prop="checkPass">
				<el-input class="orange" v-model="formLabelAlign.checkPass"
					:disabled="!isEditState || !canEditCommonInfo" size="small" type="password"
					autocomplete="new-password" v-if="pwdFlg1 == 1" @focus="formLabelAlign.checkPass = ''"></el-input>
				<el-input class="orange" v-model="formLabelAlign.checkPass"
					:disabled="!isEditState || !canEditCommonInfo" size="small" type="password"
					autocomplete="new-password" show-password v-else></el-input>
			</el-form-item>

			<el-form-item :label="$t('message.userPageTable.email')">
				<el-input class="FFF" v-model="formLabelAlign.email" :disabled="!isEditState || !canEditCommonInfo"
					size="small">
				</el-input>
			</el-form-item>

			<el-form-item :label="$t('message.userPageTable.userType')" prop="checkAccType" class="a-form-item">
				<!-- <el-select
					v-model="formLabelAlign.accType"
					size="small"
					style="width: 100%"
					:disabled="!isEditState && canEditCommonInfo"
				>
					<el-option
						v-for="item in accTypeList"
						:key="item.val"
						:label="item.label"
						:value="item.val"
					></el-option>
				</el-select> -->
				<el-radio-group v-model="formLabelAlign.accType" :disabled="!isEditState || !canEditAuthorityInfo"
					:class="'content-radios ' +
						(isEditState && canEditAuthorityInfo ? '' : '')
						" @change="MargFn" class="bg-orange">
					<el-radio :label="1">{{
						$t("message.userPageTable.admin")
					}}</el-radio>
					<el-radio :label="2">{{
						$t("message.userPageTable.ordinaryUsers")
					}}</el-radio>
				</el-radio-group>
			</el-form-item>

			<!-- <el-form-item :label="$t('message.userPageTable.mobile')">
				<el-input v-model="formLabelAlign.mobile" :disabled="!isEditState || !canEditCommonInfo" size="small">
				</el-input>
			</el-form-item> -->

			<el-form-item label="担当部署">
				<el-select class="ipt" v-model="formLabelAlign.responsible"
					:class="(isEditState && canEditAuthorityInfo ? '' : '')"
					:disabled="!isEditState || !canEditAuthorityInfo" placeholder=" ">
					<!-- <el-option v-for="(item, index) in angeList" :key="index" :value="item.key">
						{{ item.label }}
					</el-option> -->
					<el-option v-for="item in angeList" :key="item.key" :label="item.label" :value="item.key">
					</el-option>
				</el-select>
			</el-form-item>

			<div class="row-line">
				<div class="row-title">
					{{ $t("message.userPageTable.jurisdiction") }}
				</div>
			</div>
			<div class="divider" />

			<div v-for="item in formLabelAlign.permissList" :key="item.label" v-if="item.isShow">
				<el-form-item :label="item.title">
				<el-radio-group v-model="item.permission" :disabled="!isEditState || !item.isEnabled"
					:class="'content-radios ' +
						(isEditState && isEnabled ? '' : '')
						" v-show="item.isAlwaysShow">
					<el-radio :label="2">{{
						$t("message.userManageView.radio_title_0")
					}}</el-radio>
					<el-radio :label="1">{{
						$t("message.userManageView.radio_title_1")
					}}</el-radio>
				</el-radio-group>
				<el-radio-group v-model="item.permission" :disabled="!isEditState || !item.isEnabled"
					:class="'content-radios ' +
						(isEditState && isEnabled ? '' : '')
						" v-show="!item.isAlwaysShow">
					<el-radio :label="1">{{
						$t("message.userManageView.radio_title_4")
					}}</el-radio>
					<el-radio :label="2">{{
						$t("message.userManageView.radio_title_5")
					}}</el-radio>
				</el-radio-group>
			</el-form-item>
			</div>
		</el-form>

		<div class="bottom-lay">
			<el-button @click="onCancelClick" style="margin-right: 20px" :disabled="!isEditState">
				{{ $t("message.public.cancel") }}
			</el-button>

			<el-button type="primary" class="activeBtn" @click="onConfirmClick" :disabled="!isEditState">
				{{ $t("message.public.confirmD") }}
			</el-button>
		</div>

		<el-dialog :visible.sync="showDialog" width="30%" :append-to-body="true" :close-on-click-modal="false"
			:close-on-press-escape="false" :show-close="false">
			<span>{{ $t("message.userPageTable.reloginTip") }}</span>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="showDialog = false">{{
					$t("message.public.cancel")
				}}</el-button> -->
				<el-button type="primary" @click="relogin()">{{
					$t("message.public.confirm")
				}}</el-button>
			</span>
		</el-dialog>

	</div>
	<!-- <div class="row-content">
				<div
					:class="'content-radios ' + (!isEditState ? 'yellow' : '')"
				>
					<el-radio
						v-model="userInfo.accType"
						:label="1"
						:disabled="!isEditState"
						>{{ $t("message.userPageTable.admin") }}</el-radio
					>
					<el-radio
						v-model="userInfo.accType"
						:label="2"
						:disabled="!isEditState"
						>{{
							$t("message.userPageTable.ordinaryUsers")
						}}</el-radio
					>
				</div>
			</div> -->
</template>

<script>
import { getLocalStorage } from "@/utils/storage";
import { getUser, delUser, addUser, getEnvSec } from "@/api/api";
import md5 from "js-md5";
import _ from 'lodash-es';
export default {
	props: {
		inUserInfo: {
			type: Object,
			default: {
				acc: "",
				name: "",
			},
		},
	},
	// ["userInfo"],
	data() {
		var validatePass = (rule, value, callback) => {
			if (this.formLabelAlign.pwd == this.inUserInfo.pwd) {
				callback();
			}
			else if (
				!/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{6,20}$/
					.test(this.formLabelAlign.pwd)) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkPsd"))
				);
			} else {
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value !== this.formLabelAlign.pwd) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkPsdTip")
					)
				);
			} else {
				callback();
			}
		};

		var checkMobile = (rule, value, callback) => {
			if (
				!/^$/.test(
					this.formLabelAlign.mobilex
				)
			) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkMobile")
					)
				);
			} else {
				callback();
			}
		};

		var checkEmail = (rule, value, callback) => {
			if (
				!/^([A-Za-z0-9_+-.])+@([A-Za-z0-9\-.])+\.([A-Za-z]{2,22})$/.test(
					this.formLabelAlign.email
				)
			) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkEmail"))
				);
			}
		};
		var checkAcc = (rule, value, callback) => {
			if (this.formLabelAlign.acc == "") {
				callback(this.$t("message.userPageTable.rules.checkUserName"));
			}
		};
		var checkName = (rule, value, callback) => {
			if (this.formLabelAlign.name == "") {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkName"))
				);
			}
		};
		var checkAccType = (rule, value, callback) => {
			if (this.formLabelAlign.accType == "") {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkUserType")
					)
				);
			}
		};
		return {
			angeList: [],
			pwdFlg: 1,
			pwdFlg1: 1,
			formLabelAlign: {
				id: "",
				pwd: "",
				name: "",
				sex: "",
				age: 0,
				idNumber: "",
				mobile: "",
				email: "",
				createTime: "",
				creater: getLocalStorage("userID"),
				acc: "",
				accType: "",
				type: "",
				modifyTime: "",
				modifier: getLocalStorage("userID"),
				checkPass: "",

				responsible: 0,
				permissList: [],

			},
			formLabelAlignDeep: {},
			accTypeList: [
				{
					label: this.$t("message.userPageTable.admin"),
					val: 1,
				},
				{
					label: this.$t("message.userPageTable.ordinaryUsers"),
					val: 2,
				},
			],

			rules: {
				acc: [{ validator: checkAcc, trigger: "change", required: true }],
				pass: [
					{
						validator: validatePass,
						trigger: "change",
						required: true,
					},
				],
				checkPass: [
					{
						validator: validatePass2,
						trigger: "change",
						required: true,
					},
				],
				checkMobile: [{ validator: checkMobile, trigger: "change" }],
				checkEmail: [
					{ validator: checkEmail, trigger: "change", required: true },
				],
				checkName: [
					{ validator: checkName, trigger: "change", required: true },
				],
				checkAccType: [
					{
						validator: checkAccType,
						trigger: "change",
						required: true,
					},
				],
			},

			userInfo: {
				acc: "",
				name: "",
			},

			accType: getLocalStorage("accType"),
			userID: getLocalStorage("userID"),
			isEditState: false,

			showDialog: false,
			// 是否需要重新登录
			isNeedReLogin: false,


		};
	},
	// el-form-item__error
	watch: {
		inUserInfo(val) {
			console.log(val, this.angeList)
			this.formLabelAlign.permissList = [];
			let userData = getLocalStorage("userData");
			this.isEditState = false;
			this.userInfo = JSON.parse(JSON.stringify(val));

			this.formLabelAlign.acc = this.userInfo.acc;
			this.formLabelAlign.age = this.userInfo.age;
			this.formLabelAlign.email = this.userInfo.email;
			this.formLabelAlign.idNumber = this.userInfo.idNumber;
			this.formLabelAlign.mobile = this.userInfo.mobile;
			this.formLabelAlign.name = this.userInfo.name;
			this.formLabelAlign.sex = this.userInfo.sex;
			this.formLabelAlign.id = this.userInfo.userId;
			this.formLabelAlign.pwd = this.userInfo.pwd;
			this.formLabelAlign.checkPass = this.userInfo.pwd;
			this.formLabelAlign.accType = this.userInfo.accType;
			this.formLabelAlign.responsible = Number(this.userInfo.responsible);
			userData.tMenuWeb.forEach(item => {
				var isVisible = false;
				if (item.isAlwaysVisible == 1 || item.isVisible == 1) {
					isVisible = true;
				} else  {
					isVisible = false;
				}

				if (item.label == "-" || item.isAdmin == 2) {
					isVisible = false;
				}

				let tmenu = {
					title: item.label,
					systemName: item.systemName,
					isShow: isVisible,
					isAlwaysShow: item.isAlwaysVisible == 1,
					isEnabled: item.isAdmin == 0 || this.formLabelAlign.accType == 1,
					permission: this.userInfo[item.systemName.toLowerCase()] != undefined ? this.userInfo[item.systemName.toLowerCase()] : 2,
					isAdmin: item.isAdmin,
					};
				this.formLabelAlign.permissList.push(tmenu);
			})

			this.isNeedReLogin = false;

			this.$refs["formLabelAlign"].clearValidate();
		},
		formLabelAlign: {
			handler(nVal, oVal) {

				if (nVal.pwd == '') {
					this.pwdFlg = 2;
				}
				if (nVal.checkPass == '') {
					this.pwdFlg1 = 2;
				}


				setTimeout(() => {

					var divS = document.getElementsByClassName('el-form-item__error');
					// if(divS.length == 0){
					for (let i = 0; i < document.getElementsByClassName('is-required').length; i++) {
						document.getElementsByClassName('is-required')[i].style.height = '40px';
					}
					// 	return
					// }
					for (let i = 0; i < document.getElementsByClassName('is-error').length; i++) {
						if (divS[i].innerHTML) {
							document.getElementsByClassName('is-error')[i].style.height = '72px';
						} else {
							document.getElementsByClassName('is-error')[i].style.height = '40px';
						}
					}
				}, 500);
			},
			immediate: true,
			deep: true,
		},
	},

	computed: {
		canEditCommonInfo() {
			// 超管 可以改
			if (this.accType == 3 || this.accType == 1) return true;

			if (!this.inUserInfo) return false;

			// 普管管理自己
			if (this.userID == this.inUserInfo.userId) {
				return true;
			} else {
				if (this.accType == 1 && this.inUserInfo.accType == 1)
					return false;
				else return true;
			}

		},

		canEditAuthorityInfo() {
			return true;
		},
	},

	methods: {
		async getEnvSecFn() {
			let res = await getEnvSec({});
			this.angeList = res.data.data;
		},
		// 管理员和一般切换进行筛选。。。
		MargFn(e) {
			console.log(e);
			if (e == 1) {
				this.formLabelAlign.permissList.forEach(item => {
					item.permission = item.isAlwaysShow ? 2 : 1;
					item.isEnabled = true;
				})
			}
			if (e == 2) {
				this.formLabelAlign.permissList.forEach(item => {
					item.permission = item.isAlwaysShow ? 1 : 2;
					item.isEnabled = item.isAdmin == 1 ? false : true;
				})
			}
		},
		onEditClick() {
			this.pwdFlg = 1;
			this.pwdFlg1 = 1;
			this.formLabelAlignDeep = _.cloneDeep(this.formLabelAlign);
			this.isEditState = !this.isEditState;
			this.getEnvSecFn();
		},

		onCancelClick() {
			this.pwdFlg = 1;
			this.pwdFlg1 = 1;
			this.formLabelAlign = _.cloneDeep(this.formLabelAlignDeep);

			this.isEditState = false;
		},

		onConfirmClick() {
			this.formLabelAlign.ConfPwd = this.formLabelAlign.checkPass;
			this.formLabelAlign.IsUpdPwd = (this.formLabelAlign.pwd != this.userInfo.pwd && md5(this.formLabelAlign.pwd) != this.userInfo.pwd)
			var dto = {
				id: this.formLabelAlign.id,
				pwd: this.formLabelAlign.pwd,
				name: this.formLabelAlign.name,
				sex: this.formLabelAlign.sex,
				age: this.formLabelAlign.age,
				idNumber: this.formLabelAlign.idNumber,
				mobile: this.formLabelAlign.mobile,
				email: this.formLabelAlign.email,
				createTime: this.formLabelAlign.createTime,
				creater: this.formLabelAlign.creater,
				acc: this.formLabelAlign.acc,
				accType: this.formLabelAlign.accType,
				type: this.formLabelAlign.type,
				modifyTime: this.formLabelAlign.modifyTime,
				modifier: this.formLabelAlign.modifier,
				ConfPwd: this.formLabelAlign.checkPass,
				responsible: this.formLabelAlign.responsible,
				isUpdPwd: this.formLabelAlign.IsUpdPwd,
				permiss_01: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_01").permission,
				permiss_02: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_02").permission,
				permiss_03: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_03").permission,
				permiss_04: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_04").permission,
				permiss_05: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_05").permission,
				permiss_06: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_06").permission,
				permiss_07: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_07").permission,
				permiss_08: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_08").permission,
				permiss_09: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_09").permission,
				permiss_10: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_10").permission,
				permiss_11: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_11").permission,
				permiss_12: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_12").permission,
				permiss_13: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_13").permission,
				permiss_14: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_14").permission,
				permiss_15: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_15").permission,
				permiss_16: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_16").permission,
				permiss_17: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_17").permission,
				permiss_18: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_18").permission,
				permiss_19: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_19").permission,
				permiss_20: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_20").permission,
			}
			addUser(dto).then((res) => {
				console.log(this.formLabelAlign, res);
				if (res.data.code != 0) {
					
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return;
				}
				

				if (this.userID != this.userInfo.userId) {
					this.isNeedReLogin = false;
				} else if (
					(this.formLabelAlign.accType != this.userInfo.accType ||
					(this.formLabelAlign.pwd != this.userInfo.pwd && md5(this.formLabelAlign.pwd) != this.userInfo.pwd)) ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_01").permission != this.userInfo.Permiss_01 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_02").permission != this.userInfo.Permiss_02 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_03").permission != this.userInfo.Permiss_03 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_04").permission != this.userInfo.Permiss_04 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_05").permission != this.userInfo.Permiss_05 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_06").permission != this.userInfo.Permiss_06 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_07").permission != this.userInfo.Permiss_07 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_08").permission != this.userInfo.Permiss_08 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_09").permission != this.userInfo.Permiss_09 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_10").permission != this.userInfo.Permiss_10 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_11").permission != this.userInfo.Permiss_11 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_12").permission != this.userInfo.Permiss_12 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_13").permission != this.userInfo.Permiss_13 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_14").permission != this.userInfo.Permiss_14 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_15").permission != this.userInfo.Permiss_15 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_16").permission != this.userInfo.Permiss_16 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_17").permission != this.userInfo.Permiss_17 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_18").permission != this.userInfo.Permiss_18 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_19").permission != this.userInfo.Permiss_19 ||
					this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_20").permission != this.userInfo.Permiss_20)
				{
					this.isNeedReLogin = true;
				}
				if (!this.isNeedReLogin) {
					this.$message.success(res.data.msg);
				}

				this.$emit("editUserSuccess");

				if (this.isNeedReLogin) {
					this.showDialog = true;
				}
			});
		},

		relogin() {
			this.showDialog = false;
			this.$router.push("/");
			deLcalStorage("activeClass");
			deLcalStorage("accType");
			deLcalStorage("token");
			sessionStorage.token = null;
		},
	},

	created() {
		this.getEnvSecFn();
	},
};
</script>

<style lang="scss" scoped>
.edit-comp-root {
	position: relative;
	width: 100%;
	height: 100%;
	// border: 1px solid #d3d3d3;
	box-sizing: border-box;
	padding: 0px 10px;
}

.row-line-head {
	width: 100%;
	display: flex;
	align-items: center;

	button {
		width: 90px;
	}
}

.a-form-item {
	width: 100%;
	// display: flex;
	// flex-direction: row;
	align-items: center;
	// justify-content: flex-start;
}

.row-line {
	width: 100%;
	display: flex;
	padding: 5px 10px;
	align-items: center;

	.row-title {
		width: 30%;
		font-size: 14px;
		color: #333333;
		line-height: 32px;
		font-weight: 600;
	}

	.row-content {
		width: 70%;
		font-size: 14px;
		color: #333333;
		line-height: 32px;
	}

	.content-input {
		width: 100%;
		height: 30px;

		::v-deep .el-input__inner {
			width: 100%;
			height: 30px;
		}

		::v-deep .el-input__inner:focus {
			border: 1px solid #dcdfe6;
		}

		::v-deep .el-input__icon {
			// line-height: 30px;
			// color: #909399;
		}

		::v-deep .el-input__suffix {
			// width: 100%;
			// right: 0;
			// background: #dee0e3;
		}
	}

	.big-title {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		line-height: 20px;
	}
}

.row-reverse {
	flex-direction: row-reverse;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: #eaeaeb;
}

button {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0px 10px;
	// margin-right: 20px;

	border: 1px solid #eaeaeb;
	border-radius: 4px;
}

.activeBtn {
	// background: #106ebe;
	// color: #fff;
}

.bottom-lay {
	position: absolute;
	// top: 0px;
	// right: 0px;

	width: 100%;
	height: 32px;
	bottom: 0;
	right: 10px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	// background-color: red;
	button {
		height: 100%;
		// width: 66px;
	}
}

::v-deep .el-input.is-disabled .el-input__inner {
	background: #ffffe1;
}

::v-deep .el-radio-group.is-disabled .el-radio-group__inner {
	background: #ffffe1;
}

.content-radios {
	width: 100%;
	height: 100%;
	border: 1px solid #dcdfe6;
	background-color: #fff;
	display: inline-block;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding: 5px 10px;
}

.yellow {
	background-color: #ffffe1;
}

.iptYellow {
	::v-deep .el-input__inner {
		background-color: #ffffe1;
	}
}

.ipt {
	width: 100%;
	height: 32px;

	::v-deep .el-input__inner {
		// width: 238px;
		height: 32px;
	}



	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		height: 32px;
		right: 0;
		top: 4px;
		line-height: 32px;

		background: #dee0e3;
	}
}

.dialog-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

::v-deep .el-form-item {
	margin-bottom: 0px;
	padding: 0px;
	//   height: 30px;
}


::v-deep .is-error {
	height: 40px;
	transition: all .3s;
}

::v-deep .is-required {
	height: 40px;
	transition: all .3s;
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

.orange {

	::v-deep .el-input__inner {
		background: rgb(255, 222, 172) !important;
	}
}

.bg-orange {
	background: rgb(255, 222, 172) !important;
}

.FFF {
	::v-deep .el-input__inner {
		background: #FFF !important;
	}
}
</style>